<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <template v-for="(configItem, index) in privateConfig">
            <el-tab-pane :label="configItem.label" :name="configItem.label">
                <el-form ref="ruleForm"
                         label-width="100px"
                         label-position="right"
                         inline
                >
                    <template v-for="(ruleForm,index) in configItem.ruleForm">
                <!--      单行输入框-->
                <el-form-item
                        :key="index"
                        v-if="!ruleForm.type && !ruleForm.type"
                        :label="ruleForm.label"
                >
                    <XDInput :dataType="ruleForm.dataType" v-model="ruleForm.value"></XDInput>
                </el-form-item>
                <!--     多行输入框-->
                <el-form-item
                        :key="index"
                        v-if="ruleForm.type == 'textArea'"
                        :label="ruleForm.label"
                >
                    <XDInput type="textarea" v-model="ruleForm.value"></XDInput>
                </el-form-item>
                        <!--  单选下拉选择框-->
                        <el-form-item
                                :key="index"
                                v-if="ruleForm.type=='dropDown'"
                                :label="ruleForm.label"
                        >
                            <XDSelecter :list="ruleForm.list"
                                        type="dropDown"
                                        v-model="ruleForm.value"
                            ></XDSelecter>
                        </el-form-item>
                <!--  下载-->
                <el-form-item
                        :key="index"
                        v-if="ruleForm.type=='download'"
                        :label="ruleForm.label"
                >
                    <XDDownloader v-model="ruleForm.value"></XDDownloader>
                </el-form-item>
                    </template>
                </el-form>
                <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button
        ></span>
            </el-tab-pane>
        </template>
    </el-tabs>
</template>
<script>
    import XDDownloader from "./XDDownloader";
    import XDInput from "./XDInput";
    import XDSelecter from "./XDSelecter";
    export default {
        name: 'XDTabs',
        props: ['data','config'],
        data() {
            return {
                privateConfig: [
                    {
                        label: '隐患详情',
                        ruleForm: [
                            {
                                label: '隐患级别',
                                type: 'download',
                                prop: '',
                                value: '重大隐患'
                            },
                        ],
                        ruleFormData: {}
                    },
                    {
                        label: '核查情况',
                        ruleForm: [
                            {
                                label: '整改要求',
                                prop: '',
                                value: '水仓漏水'
                            },
                        ],
                        ruleFormData: {}
                    },
                    {
                        label: '检查信息',
                        ruleForm: [
                            {
                                label: '是否关联',
                                prop: '',
                                value: ''
                            },
                        ],
                        ruleFormData: {}
                    },
                ],
                activeName: '',
            };
        },
        created() {
            this.privateConfig = this.config
            this.activeName = this.privateConfig[0].label
            this.process()
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            // 处理数据
            process() {
               
                for (let i=0;i<this.privateConfig.length;i++) {
                    for (let j=0;j<this.privateConfig[i].ruleForm.length;j++) {
                        for (let key in this.data) {
                            if (key == this.privateConfig[i].ruleForm[j].prop) {
                                this.privateConfig[i].ruleFormData[key] = this.data[key]
                            }
                        }
                    }
                }
            },
            handleClose() {
            },
            submit() {
            }
        },
        components: {
            XDInput,
            XDDownloader,
            XDSelecter
        }
    };
</script>